<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="../res/layui/css/layui.css">
    <style>
        #userInfoDialog {
            padding: 20px;
            width: 400px;
            display: none; /*隐藏层*/
        }

        #userInfoDialog p {
            padding: 10px 0;
        }
    </style>


</head>
<body>
<div class="layui-fluid">
    <div class="layui-card">
        <div class="layui-card-header">用户列表</div>
        <div class="layui-card-body">
            <table id="userlist" lay-filter="userFilter"></table>
        </div>
    </div>
</div>
<!--用户信息对话框-->
<div id="userInfoDialog">
    <table class="layui-table" lay-size="sm">
        <tr>
            <td>头像</td>
            <td><img id="headimg" src="" alt=""></td>
        </tr>
        <tr>
            <td>用户名</td>
            <td><span id="username"></span></td>
        </tr>
        <tr>
            <td>昵称</td>
            <td><span id="nickname"></span></td>
        </tr>
        <tr>
            <td>性别</td>
            <td><span id="sex"></span></td>
        </tr>
        <tr>
            <td>电话</td>
            <td><span id="phone"></span></td>
        </tr>
        <tr>
            <td>生日</td>
            <td><span id="birth"></span></td>
        </tr>
        <tr>
            <td>注册时间</td>
            <td><span id="regtime"></span></td>
        </tr>
        <tr>
            <td>个性签名</td>
            <td><span id="mark"></span></td>
        </tr>
    </table>
</div>

<script src="../res/layui/layui.js"></script>
<script>
    layui.use(function () {
        //加载获取table模块
        var table = layui.table;
        //加载获取layer弹层模块
        var layer = layui.layer;
        //加载jquery对象
        var $ = layui.jquery;
        
        //监听工具条事件
        table.on('tool(userFilter)', function(obj) {
            var data = obj.data; //获取当前行数据
            var layEvent = obj.event; //获取lay-event对应的值
            
            //详情操作
            if (layEvent === 'details') {
                //填充用户信息到对话框
                if (data.avatar) {
                    $('#headimg').attr('src', data.avatar).show();
                } else {
                    $('#headimg').hide();
                    // 如果没有头像，可以显示用户名的第一个字符作为默认头像
                    $('#headimg').after('<div style="width: 60px; height: 60px; line-height: 60px; background: #1E9FFF; color: white; text-align: center; border-radius: 50%;">' + (data.username ? data.username.charAt(0) : '用') + '</div>');
                }
                $('#username').text(data.username);
                $('#nickname').text(data.nickname);
                $('#sex').text(data.sex || '未知');
                $('#phone').text(data.phone || '未设置');
                $('#birth').text(data.birthday || '未设置');
                $('#regtime').text(data.create_time || '未知');
                $('#mark').text('暂无');
                
                //显示对话框
                layer.open({
                    type: 1,
                    title: '用户详情',
                    content: $('#userInfoDialog'),
                    area: ['400px', 'auto'],
                    end: function() {
                        $('#userInfoDialog').hide(); //隐藏对话框
                        // 移除动态添加的默认头像元素
                        $('#headimg').next('div').remove();
                        $('#headimg').show(); // 显示头像元素，以便下次使用
                    }
                });
            }
            //状态更新操作
            else if (layEvent === 'updateStatus') {
                var status = $(this).data('status');
                var statusText = status === 1 ? '启用' : '禁用';
                
                layer.confirm('确定要' + statusText + '该用户吗？', function(index) {
                    //发送请求到后端
                    $.post(status === 1 ? '/user/enable' : '/user/disable', {id: data.id}, function(res) {
                        if (res.code === 200) {
                            layer.msg(res.message, function() {
                                //重新加载表格
                                table.reload('userlist');
                            });
                        } else {
                            layer.msg(res.message);
                        }
                    });
                    layer.close(index);
                });
            }
            //删除操作
            else if (layEvent === 'del') {
                layer.confirm('确定要删除该用户吗？删除后数据将无法恢复！', function(index) {
                    //这里可以添加删除用户的逻辑
                    layer.msg('删除功能暂未实现');
                    layer.close(index);
                });
            }
        });

    //数据表格渲染
    table.render({
        elem: '#userlist',     //绑定table元素
        url: '/user/list',
        page: {
            limit:5,  //每页显示的行数
            limits:[5,10,15,20,30],
        },
        cols:[[
            {type:'checkbox',width:50},
            {type:'numbers',title: '序号'},
            {field:'nickname',title: '昵称'},
            {field:'username',title: '用户名'},
            {field:'password',title: '密码'},
            {field: 'sex',title: '性别'},
            {field: 'birthday',title: '生日'},
            {field: 'email',title: '邮箱'},
            {field: 'phone',title: '电话'},
            {field: 'create_time',title: '注册时间'},
            {field: 'status',title: '状态',templet: function(d) {
                return d.status === 1 ? '<span class="layui-badge layui-bg-green">正常</span>' : '<span class="layui-badge layui-bg-red">禁用</span>';
            }},
            {fixed: 'right', title: '操作', toolbar: '#rowTools', width: 200}
        ]]
    })
    })

</script>


<!--操作栏自定义模板-->
<script id="rowTools" type="text/html">
    <div class="layui-btn-container">
        <button class="layui-btn layui-btn-normal layui-btn-xs" lay-event="details">
            <i class="layui-icon layui-icon-list"></i>
            详情
        </button>
        <button class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">
            <i class="layui-icon layui-icon-delete"></i>
            删除
        </button>
        {{# if(d.status === 0){ }}
        <button class="layui-btn layui-btn-warm layui-btn-xs" lay-event="updateStatus" data-status="1">
            <i class="layui-icon layui-icon-close-fill"></i>
            禁用
        </button>
        {{# }else{ }}
        <button class="layui-btn layui-btn-normal layui-btn-xs" lay-event="updateStatus" data-status="0">
            <i class="layui-icon layui-icon-ok-circle"></i>
            启用
        </button>
        {{# } }}
    </div>
</script>


</body>
</html>